<template>
  <div>
    <el-popover placement="right" width="400" trigger="click">
      <div class="block">
        <el-date-picker size="mini" v-model="value4" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions2">
        </el-date-picker>
        <el-button size="mini" @click="getRain()">查询</el-button>
      </div>

      <el-button slot="reference" type="text" style=" position: relative; ">
        <i class="el-icon-search"></i>查询条件</el-button>
    </el-popover>
  </div>
</template>
<style></style>
<script>
import { mapGetters } from 'vuex'
import VectorSource from 'ol/source/vector'
import GeoJSON from 'ol/format/GeoJSON'
import Vue from 'vue'
export default {
  data () {
    return {
      value4: [new Date(new Date().format('yyyy-MM-dd') + ' 00:00:00'), new Date()],
      pickerOptions2: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  computed: {
    // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'getLayerArray'
    ])
  },
  methods: {
    getRain () {
      let BEGINDATE = new Date(this.value4[0]).format('yyyy-MM-dd hh:mm:ss')
      let ENDDATE = new Date(this.value4[1]).format('yyyy-MM-dd hh:mm:ss')
      let url = '/api-proxy/rain/rainLives?isGeo_=true&goeType=Polygon&typeKey_=rain&longitudeKey_=LNG&latitudeKey_=LAT'
      let param1 = {
        SR2: '10', SR1: '0', BEGINDATE: BEGINDATE, ENDDATE: ENDDATE }
      let param2 = { SR2: '25', SR1: '10', BEGINDATE: BEGINDATE, ENDDATE: ENDDATE }
      let param3 = { SR2: '50', SR1: '25', BEGINDATE: BEGINDATE, ENDDATE: ENDDATE }
      let param4 = { SR2: '100', SR1: '50', BEGINDATE: BEGINDATE, ENDDATE: ENDDATE }
      let param5 = { SR2: '200', SR1: '100', BEGINDATE: BEGINDATE, ENDDATE: ENDDATE }
      let param6 = { SR2: '10000', SR1: '200', BEGINDATE: BEGINDATE, ENDDATE: ENDDATE }
      let params = [param1, param2, param3, param4, param5, param6]
      let layerArray = this.getLayerArray({ options: { 'rainfall': ['0-10', '10-25', '25-50', '50-100', '100-200', '200以上'] } })
      for (let param in params) {
        let vectorSource = new VectorSource({
          // 解析器
          format: new GeoJSON(),
          loader: function (extent, resolution, projection) {
            const { $getText } = Vue.prototype._vue
            $getText(url, params[param]).then(data => {
              let f = vectorSource.getFormat()
              // 解析器解析GeoJSON报文
              let features = f.readFeatures(data, { featureProjection: projection })
              f.readProjection(data)
              f.getLastExtent()
              vectorSource.addFeatures(features)
            }).catch(e => {
              vectorSource.removeLoadedExtent(extent)
            })
          }
        })

        layerArray[param].setSource(vectorSource)
        // layer.refresh({ force: true, active: true });
      }
      // 设定数据源
    }
  }
}
</script>
